<template>
  <div>
    <div style="height:100%;background-color:#fff;padding:15px;margin: 0 auto;">
      <div class="table-operator" style="margin-bottom: 5px; line-height: 40px">
        <j-dict-select-tag
          placeholder="请选择"
          dictCode="customer_info_progress"
          v-model="data.progress"
          style="width: 130px; margin-right: 10px"
          @change="onchangeInfo()"
          v-has="'customer:progress'"
        />
        <a-button type="primary" v-has="'customer:edit'" @click="editCustomer" >编辑</a-button>
        <a-button type="default" v-has="'customer:scrap'" v-show="data.isScrapOrder != 1" @click="scrapBill">废单审批</a-button>
        <a-button type="danger" v-has="'customer:delete'" @click="deleteCustomer">删除</a-button>
      </div>
      <div style="height: calc(100vh); overflow-y: auto">
        <a-card :loading="loading" :headStyle="{backgroundColor:'#f5f5f5'}" style="width: 100%;margin-bottom: 10px" title="客户基本信息">
          <div style="margin-bottom: 20px">
            <span>客户名称：{{ data.name }}</span><br>
          </div>
          <div style="margin-bottom: 20px">
            <span v-if="data.phone != null && data.phone !== ''">客户电话：{{ data.phone }}</span>
            <span v-if="data.phone == null || data.phone === ''">客户电话：<font color="red">请尽快完善信息</font></span><br>
          </div>
          <div style="margin-bottom: 20px">
            <span>微信号码：{{ data.wechatNumber != null ? data.wechatNumber : '无' }}</span><br>
          </div>
          <div style="margin-bottom: 20px">
            <span v-if="data.provinceCode != null && data.cityCode != null && data.areaCode != null">
              小区：{{data.provinceCode != null ? data.provinceCode : '' }} {{ data.cityCode != null ? data.cityCode : '' }}
              {{ data.areaCode != null ? data.areaCode : '' }} {{ data.townshipCode != null ? data.townshipCode : '' }}
              {{ data.villageCode != null ? data.villageCode : '' }}
            </span>
            <span v-if="data.provinceCode == null || data.cityCode == null || data.areaCode == null">
              小区：<font color="red">请尽快完善信息</font>
            </span>
            <br>
          </div>
          <div style="margin-bottom: 20px">
            <span v-if="data.address != null && data.address !== ''">详细地址：{{ data.address }}</span>
            <span v-if="data.address == null || data.address === ''">详细地址：<font color="red">请尽快完善信息</font></span><br>
          </div>
          <div style="margin-bottom: 20px">
            <span>客源渠道：{{this.getDictItemValue(data.customerChannel,"customer_info_customer_channel")}}</span><br>
          </div>
          <div style="margin-bottom: 20px">
            <span>房屋户型：{{this.getDictItemValue(data.houseType,"customer_info_house_type")}}</span><br>
          </div>
          <div style="margin-bottom: 20px">
            <span>房屋面积：{{ data.houseArea != null || "" ? data.houseArea+'m²':'暂无'}}</span><br>
          </div>
          <div style="margin-bottom: 20px">
            <span>量房时间：{{ data.calculateTime }}</span><br>
          </div>
          <div style="margin-bottom: 20px">
            <span>邀约到店时间：{{ data.inviteTime }}</span><br>
          </div>
          <div style="margin-bottom: 20px">
            <span>实际到店时间：{{ data.factTime }}</span><br>
          </div>
          <div style="margin-bottom: 20px">
            <span>交定时间：{{ data.decidesTime }}</span><br>
          </div>
          <div style="margin-bottom: 20px">
            <span>签约时间：{{ data.signedTime }}</span><br>
          </div>
          <div style="margin-bottom: 20px">
            <span>开工时间：{{ data.startworkTime }}</span><br>
          </div>
          <div style="margin-bottom: 20px">
            <span>竣工时间：{{ data.completionTime }}</span><br>
          </div>
          <div style="margin-bottom: 20px">
            <span>创建时间：{{ data.createTime }}</span><br>
          </div>
          <div style="margin-bottom: 20px">
            <span>创建人：{{ data.createBy }}</span><br>
          </div>
          <div style="margin-bottom: 20px">
            <span>装修风格：{{ getDictItemValue(data.decorationStyle,"gh_customer_info_decoration_style") }}</span><br>
          </div>
          <div style="margin-bottom: 20px">
            <span v-show="data.panoramaUrl != null">VR全景图：<a :href="data.panoramaUrl" target="_blank">{{data.panoramaUrl}}</a></span><br v-show="data.panoramaUrl != null">
            <span v-show="data.panoramaUrl == null">VR全景图：无</span><br v-show="data.panoramaUrl == null">
          </div>
        </a-card>
        <a-card :loading="loading" :headStyle="{backgroundColor:'#f5f5f5'}" style="width: 100%; margin-bottom: 10px" title="相关人员">
          <div style="margin-bottom: 20px">
            <span>邀约客服：{{ data.inviteCustomerService != null || "" ? data.inviteCustomerService:"暂无" }}</span><br>
          </div>
          <div style="margin-bottom: 20px">
            <span>家装顾问：{{ data.homeAdviser != null || "" ? data.homeAdviser:"暂无" }}</span><br>
          </div>
          <div style="margin-bottom: 20px">
            <span>设计师：{{ data.designer != null || "" ? data.designer:"暂无" }}</span><br>
          </div>
          <div style="margin-bottom: 20px">
            <span>工程管家：{{ data.projectKeeper != null || "" ? data.projectKeeper:"暂无" }}</span><br>
          </div>
          <div style="margin-bottom: 20px">
            <span>工程监理：{{ data.projectSupervision != null || "" ? data.projectSupervision:"暂无" }}</span><br>
          </div>
          <div style="margin-bottom: 20px">
            <span>预决算员：{{ data.preFinalAccounts != null || "" ? data.preFinalAccounts:"暂无" }}</span><br>
          </div>
        </a-card>
      </div>
    </div>

    
    
    <scrap-bill-modal ref="scrapBillModal" @scrapBillOk="scrapBillOk"></scrap-bill-modal>
    <edit-customer-info-modal ref="editCustomerInfoModal" @editOk="editOk"></edit-customer-info-modal>
  </div>
</template>

<script>
  import STable from '@/components/table/'
  import ABadge from "ant-design-vue/es/badge/Badge"
  import { saveCustomerInfo } from '@/api/api'
  import JDictSelectTag from '@comp/dict/JDictSelectTag'
  import {getAction, deleteAction, postAction} from "@api/manage";
  
  import {filterDictTextByCache} from '@comp/dict/JDictSelectUtil'
  import editCustomerInfoModal from './modules/editCustomerInfoModal'
  import scrapBillModal from "./modules/scrapBillModal";
  export default {
    components: {
      JDictSelectTag,
      ABadge,
      STable,
      scrapBillModal,
      editCustomerInfoModal,
    },
    props: {
      customerId: {
        required: true,
        default: 0
      },
    },
    inject:['closeCurrent'],
    data() {
      return {
        url: {
          getCustomerInfoById: '/ghCustomerInfo/getCustomerInfoById',
          list: "/ghCustomerInfo/list",
          delete: "/ghCustomerInfo/delete",
          deleteBatch: "/ghCustomerInfo/deleteBatch",
          exportXlsUrl: "/ghCustomerInfo/exportXls",
          importExcelUrl: "/ghCustomerInfo/importExcel",
          getItemsByDictCodeUrl: "/ghCustomerInfo/getItemsByDictCode",
          getCustomerFollowInfo: "/ghFollowRecord/getCustomerFollowRecordInfo",
          queryAllUserBackCombo: "/sys/api/queryAllUserBackCombo",
          commentList: "/ghFollowRecordComment/list",
          commentAdd: "/ghFollowRecordComment/add",
          commentDelete: "/ghFollowRecordComment/delete"
        },
        data: {},
        queryParam:{},
        loading: false,
        
        followType: '',
        followCreateId: '',
        
        commentListData: [],
        imgList:[],
        userList: [],
        previewVisible: false,
        previewImage: '',
        currentFollowId: 0,
        showCommentFlag: false,
        content:'',
        
        currentUser: '',
        defaultProgressValue: '',
        currentName: ''
      }
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          'processing': '进行中',
          'success': '完成',
          'failed': '失败'
        }
        return statusMap[status]
      }
    },
    computed: {

    },
    created() {
      this.getCustomerInfo();
      this.getUserList();
    },
    methods: {
      getCustomerInfo(value) {
        this.loading = true;
        getAction(this.url.getCustomerInfoById, {
          id: this.customerId
        }).then((res) => {
          if (res.success) {
            this.loading = false;
            this.data = res.result;
            this.currentName = this.data.name;
            this.defaultProgressValue = res.result.progress;
            if (value){
              this.$router.push({ path: "/infoTab", query: {id: this.customerId, name: this.currentName}});
            }
          }
        })
      },
      
      //废单
      scrapBill() {
        this.$refs.scrapBillModal.add(this.data);
        this.$refs.scrapBillModal.title = "申请废单";
      },
      //申请废单成功回调
      scrapBillOk() {
        this.getCustomerInfo();
        /*this.closeCurrent();
        this.$router.push({ path: "/GhCustomerInfoList"});*/
      },
      editOk(){
        this.getCustomerInfo(1);
      },
      //删除
      deleteCustomer() {
        let that = this;
        this.$confirm({
          title: "确认删除",
          content: "是否删除该客户",
          onOk: function () {
            deleteAction(that.url.delete, {
              id: that.data.id
            }).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.closeCurrent();
              } else {
                that.$message.warning(res.message);
              }
            });
          }
        });
      },
      
      
      
      getUserList() {
        getAction(this.url.queryAllUserBackCombo, {})
        .then((res) => {
          this.userList = res;
        })
      },
      onchangeInfo() {
        if (this.data.progress != null && this.data.progress !== ""){
          let params = this.data;
          if (parseInt(this.data.progress) < parseInt(this.defaultProgressValue)){
            this.$message.warning("当前进展不可逆向修改，请重新选择");
            this.data.progress = this.defaultProgressValue;
            return;
          }
          if (this.data.progress >= 1 && this.data.progress <= 5) {
            params.stageType = 1
          } else if (this.data.progress >= 6 && this.data.progress <= 12) {
            params.stageType = 3
          } else if (this.data.progress >= 13 && this.data.progress <= 43) {
            params.stageType = 4
          } else if (this.data.progress >= 44 && this.data.progress <= 45) {
            params.stageType = 5
          }
          saveCustomerInfo(params).then((res) => {
            if (res.success) {
              this.$message.success(res.message);
              this.loading = false;
              this.model = params;
              this.defaultProgressValue = this.data.progress;
              this.getCustomerInfo();
              this.$emit("editOk");
            } else {
              this.$message.error(res.message);
            }
          })
        }else {
          this.$message.warning("项目进展不能为空")
          this.data.progress = this.defaultProgressValue;
        }
      },
      async handlePreview(url,imgList) {
        this.previewImage = url;
        this.imgList = imgList;
        this.previewVisible = true;
      },
      //关闭预览照片
      handleClose() {
        this.previewVisible = false;
      },
      getDictItemValue(text, dictType) {
        return filterDictTextByCache(dictType, text);
      },
      editCustomer(){
        this.$refs.editCustomerInfoModal.edit(this.data);
      },
      
      filterOptionCreateBy(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
    }
  }
</script>

<style lang="less" scoped>
  span {
    padding: 10px;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  
</style>